<template>
    <div class="page">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-profile"></i> 管理员管理 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container" style="border:none;">
            <div class="handle-box">
                <el-button @click="addVisible = true" class="btn-add" icon="el-icon-lx-add" type="success">新增</el-button>
            </div>
            <div class="box">
                <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                    <el-table-column type="selection" width="110" align="center"></el-table-column>
                    <el-table-column prop="id" label="ID" width="200" align="center"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="230"></el-table-column>
                    <el-table-column label="头像" align="center">
                        <template slot-scope="scope">
                            <el-image class="table-td-thumb" :src="scope.row.image" :preview-src-list="[scope.row.image]"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="account" label="账号"></el-table-column>
                    <el-table-column label="操作" width="330" align="center">
                        <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, prev, pager, next"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    :page-count="pageCount"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                ></el-pagination>
            </div>
        </div>

        <!-- 新增管理员dialog -->
        <el-dialog title="新增管理员" :visible.sync="addVisible" width="34%" :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="70px">
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="照片" prop="image">
                    <el-upload 
                        action=""
                        list-type="picture-card"
                        :class="{ hide: !uploadVisible }"
                        :limit="1"
                        :http-request="handleUpload"
                        >
                      <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdd">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑管理员dialog -->
        <el-dialog title="编辑管理员" :visible.sync="editVisible" width="34%" :close-on-click-modal="false">
            <el-form ref="form" :model="editForm" :rules="rules" label-width="70px">
                <el-form-item label="ID" prop="id">
                  <el-input v-model="editForm.id" placeholder="ID" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="editForm.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="account">
                  <el-input v-model="editForm.account" placeholder="账号" disabled></el-input>
                </el-form-item>
                <el-form-item label="照片" prop="image">
                  <el-upload 
                    action=""
                    list-type="picture-card"
                    :class="{ hide: !uploadVisible }"
                    :limit="1"
                    :http-request="handleUpload"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getRequest, postRequest } from '@/api/index';
import { handleUploadImg } from '@/utils/upload';

export default {
  	name: 'ManageManager',
    components: {},
    data() {
      return {
        addVisible: false,
        editVisible: false,
        uploadVisible: true,
        dialogImgUrl: '',
        tableData: [],
        // 当前页面
        currentPage: 1,
        pageSize: 10,
        pageCount: 5,
        form: {
          id:'',
          name: '',
					account:''
        },
        editForm: {
          id: '',
          name: '',
          account: ''
        },
        rules: {}
        };
    },
    created() {
        this.getManagerData();
    },
    methods: {
      // 获取所有管理员信息
      getManagerData() {
      	let that = this;
      	getRequest('/login/admin/adm/getadmininfo', {
                current_page: this.currentPage,
                itemsofpage: this.pageSize
    			}).then(
      			res => {
                    console.log(res);
                    that.tableData = res.data.content;
                    that.pageCount = res.data.total_pages;
    				},
      		err => {}
    		);
      },
      // 新增
      saveAdd() {
				if(this.form.name==null){
					this.$message({
          	message: '管理员姓名不得为空！',
          	type: 'warning'
					});
				}
				else{
					postRequest('/login/admin/adm/insertadmininfo', this.form).then(res => {
						if (res.code == 200) {
							this.$message.success('新增管理员成功!');
							this.getManagerData();
							this.addVisible = false;
						}
					})
				}
      },
      // 更新信息
      saveEdit() {
				if(this.editForm.name==''){
				console.log(this.editForm.name)	
					this.$message({
          	message: '管理员姓名不得为空！',
          	type: 'warning'
					});
				}
				else{
					postRequest('/login/admin/adm/updateadmininfo', this.editForm).then(res => {
						if(res.code == 200) {
							this.$message.success('修改管理员信息成功!');
							this.getManagerData();
							this.editVisible = false;
						} else {
							this.$message.error('修改管理员信息失败!');
						}
					}, err => {
					})
				}
      },
      handleUpload(item) {
        handleUploadImg(item).then(res => {
          if (res.code == 200) {
            this.$message.success("图片上传成功！");
            this.dialogImgUrl = res.data.url;
            this.form.image = res.data.url;
            // 上传后隐藏
            this.uploadVisible = false;
          } else {
            this.$message.error("上传超出大小限制！");
          }
        })
      },
      handleEdit(index, row) {
          console.log(this.$store.state.token)
        this.editVisible = true;
        this.editForm = row;
      },
      handleDelete(index, row) {
        this.$confirm('确定要删除吗?', '提示', {
        	confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postRequest('/login/admin/adm/deleteadmininfo', 
					{
						id: row.id						
					},
					global.CONTENT_TYPE_URLENCODED
				).then(res => {
          	console.log(res);
            if (res.code == 200) {
              this.$message.success('删除成功!');
              // 删除指定位置
              this.tableData.splice(index, 1);
            }
          }, err => {
          })
        }).catch(() => {
          this.$message.info('已取消')
        })  
      },
      handlePageChange(page) {
          this.currentPage = page;
          this.getManagerData();
      },
      handleSizeChange(size) {
          this.pageSize = size;
          this.getManagerData();
      }
    }
};
</script>

<style>
.hide .el-upload--picture-card {
  display: none;
}
.handle-box {
    height: 30px;
    margin-bottom: 20px;
    /* float: left; */
}
.btn-add {
    float: right;
}
.table {
    margin: 10px;
    
}
.el-table--border {
    border: 1px solid #EBEEF5 !important;
}
.box{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: auto;
}
.el-table--border{
    border: none;
}
.el-table{
    width:auto;
}
</style>